<script lang="ts" setup name="App">
    import { ref, shallowRef, shallowReactive, reactive } from 'vue';

    let sum = shallowRef(0);
    let person = shallowRef({
        name: 'zhangsan',
        age: 18
    });
    let car = shallowReactive({
        brand: 'lixiang',
        options: {
            color: 'red',
            engine: 'V8'
        }
    });

    function changeSum() {
        sum.value += 1;
    }

    function changeName() {
        person.value.name = 'lisi'; // shallowRef时，name的变化检测不到
    }

    function changeAge() {
        person.value.age += 1;      // shallowRef时，age的变化检测不到
    }

    function changePerson() {
        person.value = {
            name: 'new',
            age: 15
        };
    }

    function changeBrand() {
        car.brand = 'xiaomi';
    }

    function changeColor() {
        car.options.color = 'white';
    }

    function changeEngine() {
        car.options.engine = 'V10'
    }

    function changeCar() {
        Object.assign(car, {
            brand: 'byd',
            options: {
                color: 'blue',
                engine: 'V4'
            }
        });
    }
</script>

<template>
    <div class="app">
        <h2>求和：{{ sum }}</h2>
        <h2>名字：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <button @click="changeSum">sum+1</button>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改整个人</button>
        <h2>汽车品牌：{{ car.brand }}</h2>
        <h2>汽车颜色：{{ car.options.color }}</h2>
        <h2>汽车引擎：{{ car.options.engine }}</h2>
        <button @click="changeBrand">修改品牌</button>
        <button @click="changeColor">修改颜色</button>
        <button @click="changeEngine">修改引擎</button>
        <button @click="changeCar">修改整个车</button>
    </div>
</template>

<style scoped>
    .app {
        background-color: skyblue;
        border-radius: 10px;
        box-shadow: 0 0 10px;
        padding: 10px;
    }
</style>